<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.name"
        name="name"
        label="姓名"
        placeholder="输入姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="form.telephone"
        name="telephone"
        label="电话"
        placeholder="输入联系电话"
        :rules="[{ required: true, message: '请填写联系电话' }]"
      />
      <van-field
        v-model="form.branch"
        name="branch"
        label="分店"
        placeholder="输入分店"
        :rules="[{ required: true, message: '请填写分店' }]"
      />
      <van-field
        v-model="form.begin_date"
        name="begin_date"
        label="开始时间"
        readonly
      />
      <van-field
        v-model="form.end_date"
        name="end_date"
        label="结束时间"
        readonly
      />
      <div style="margin: 32px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { WxEmployeeAuth } from "@/api/member";
import { getWeChatUser } from "@/api/wechat";

export default {
  name: "EmployeeAuthInfo",
  components: {
    NavBar,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  props: ["retailer_id"],
  data() {
    return {
      title: this.$route.meta.title,
      form: {
        name: "",
        telephone: "",
        branch: "",
        role: this.$route.query.role,
        begin_date: this.$route.query.begin_date,
        end_date: this.$route.query.end_date,
        key: this.$route.query.key,
        pid: this.$route.query.pid,
        retailer_id: this.retailer_id
      },
      message: null,
    };
  },
  mounted() {
   this.getWechatUserInfo();
  },
  methods: {
    getWechatUserInfo() {
      const openid = localStorage.getItem("openid");
      getWeChatUser(openid)
        .then((res) => {
          this.form.name = res.data.name;
          this.form.telephone = res.data.telephone;
        })
        .catch((error) => {
          console.log(error);
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },
    onSubmit(values){
      console.log(values);
      this.AuthEmployee();
    },
    AuthEmployee() {
      
      WxEmployeeAuth(this.form)
        .then((res) => {
          console.log(res);
          const data = res.data;
          if (data.status_code == 200) {        
            this.$toast.success(data.message);
            this.$router.push(`/employee/${data.employee.id}`)
          } else {
            this.message = data.message;
            this.$toast(data.message);
          }
        })
        .catch(() => {
          this.$toast("获取信息错误!");
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>